import { useMemo } from 'react';

// 版本配置类型
export interface VersionConfig {
  enabled: boolean;
  clickable: boolean;
  showUpgrade: boolean;
  showModal: boolean;
  opacity: number;
  textColor: string;
  cursor: string;
  grayscale: boolean;
}

// 预设配置
export const VERSION_PRESETS = {
  // 完全禁用 - 置灰不可交互
  DISABLED: {
    enabled: false,
    clickable: false,
    showUpgrade: false,
    showModal: false,
    opacity: 0.5,
    textColor: 'text.disabled',
    cursor: 'default',
    grayscale: true,
  },

  // 只读模式 - 正常显示但不可交互
  READONLY: {
    enabled: true,
    clickable: false,
    showUpgrade: false,
    showModal: false,
    opacity: 1,
    textColor: 'text.primary',
    cursor: 'default',
    grayscale: false,
  },

  // 完全启用 - 所有功能可用
  ENABLED: {
    enabled: true,
    clickable: true,
    showUpgrade: true,
    showModal: true,
    opacity: 1,
    textColor: 'text.primary',
    cursor: 'pointer',
    grayscale: false,
  },

  // 开发模式 - 启用但不显示升级
  DEVELOPMENT: {
    enabled: true,
    clickable: true,
    showUpgrade: false,
    showModal: true,
    opacity: 1,
    textColor: 'text.primary',
    cursor: 'pointer',
    grayscale: false,
  },
} as const;

/**
 * 版本配置 Hook
 * @param preset 预设配置名称或自定义配置
 * @returns 版本配置对象和样式
 */
export const useVersionConfig = (
  preset: keyof typeof VERSION_PRESETS | VersionConfig = 'DISABLED',
) => {
  const config = useMemo(() => {
    if (typeof preset === 'string') {
      return VERSION_PRESETS[preset];
    }
    return preset;
  }, [preset]);

  const styles = useMemo(
    () => ({
      container: {
        borderTop: '1px solid',
        borderColor: 'divider',
        pt: 2,
        mt: 1,
        cursor: config.clickable ? 'pointer' : config.cursor,
        color: config.enabled ? 'text.primary' : config.textColor,
        fontSize: 12,
        opacity: config.enabled ? 1 : config.opacity,
        pointerEvents: config.clickable ? 'auto' : 'none',
        transition: 'all 0.3s ease',
      },

      label: {
        width: 30,
        color: config.enabled ? 'text.auxiliary' : config.textColor,
      },

      text: {
        color: config.enabled ? 'text.primary' : config.textColor,
      },

      version: {
        whiteSpace: 'nowrap',
        color: config.enabled ? 'text.primary' : config.textColor,
      },

      image: {
        height: 13,
        marginTop: -1,
        opacity: config.enabled ? 1 : config.opacity,
        filter:
          config.grayscale && !config.enabled ? 'grayscale(100%)' : 'none',
      },

      upgrade: {
        opacity: config.enabled ? 1 : config.opacity,
      },
    }),
    [config],
  );

  return {
    config,
    styles,
  };
};

export default useVersionConfig;
